<!-- 路由器 -->
<template>

  <div class="pag" ref="pag">
    <div class="pag-ct" ref="pagCt">
      <img src="~assets/images/reward/bn1.png" alt="" class="banner">
      <div class="detail">
        <h2>{{ goods.name }}</h2>
        <div class="price">
          <div>{{ goods.price }}<span>CVNT</span></div>
          <div class="stock">库存数量: {{ goods.stock }}</div>
        </div>
      </div>
      <div class="product-info">
        <h4>产品信息</h4>
        <div class="imgs">
          <img src="~assets/images/reward/1.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="bottom-bar" @touchmove.prevent>
<!--      <a class="youzhan-buy" @click="buyYz" :href="youzanUrl" target="_blank">-->
<!--        <div>前往有赞商城购买</div>-->
<!--        <div>使用CNY支付</div>-->
<!--      </a>-->
      <div class="m-buy" @click="next">
        <div>立即购买</div>
        <div>使用CVNT支付</div>
      </div>
    </div>
    <cube-popup  type="my-popup"  class="buy-popup"
                 ref="myPopup2" position="bottom"
                 :maskClosable="true" v-model="popVisible">
      <div class="choose-product" :class="{'show': isShowPopup}">
        <h6>选择商品和数量</h6>
        <div class="product-type">
          <label>商品选择</label>
          <div class="product-type-item">{{ goods.name }}</div>
        </div>
        <div class="product-num">
          <label>数量选择</label>
          <div class="num-select">
            <span @touchstart="num < 2 ? '' : num--">-</span>
            <input type="number" v-model="num">
            <span @touchstart="num > 101 ? '' : num++">+</span>
          </div>
        </div>
        <div class="total">
          <div class="lb">您需要支付</div>
          <div class="total-price">{{ total }}<span>CVNT</span></div>
        </div>
        <div @click="next" class="next">下一步</div>
      </div>
    </cube-popup>
  </div>

</template>

<script>
 import bridge from 'common/js/bridge'
 import {goods_search} from 'api'
 import {Num, versions} from 'common/js/utl.js'

  export default {
    data() {
      return {
        youzanUrl: 'https://detail.youzan.com/show/goods?alias=3nhygxzo7hc2v',
        isShowPopup: false,
        popVisible: false,
        num: 1,
        isLoading: false,
        goods: {},
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let gid = to.query.gid || 1;
        let uid = to.query.uid;
        let token = to.query.token;
        let phone = to.query.phone;
        let shopToken = to.query.shopToken;
        let area = to.query.area;
        vm.gid=gid;
        vm.uid = uid;
        vm.token = token;
        vm.phone = phone;
        vm.shopToken = shopToken;
        vm.area = area;
        vm.getDetail({
          gid
        })
      })
    },
    mounted(){

    },
    computed: {
      total(){
        return (Num.mul(this.num, this.goods.cvnt || 0)).toFixed(9)
      }
    },
    watch: {
      popVisible(nv){
        if(nv){
          requestAnimationFrame(()=>{
            requestAnimationFrame(()=>{
              this.isShowPopup = true
            })
          })
        }else{
          this.isShowPopup = false
          // this.$refs.pagCt.scrollTop = this.$refs.pagCt.scrollTop + .1
          this.$refs.pagCt.focus();
        }
      }
    },
    methods: {
      buy2(){
        this.$warn('CVNT购买数量已售罄请移步有赞商城')
        //this.$warn('CVNT购买数量已售罄请移步有赞商城')
      },
      getDetail(){
        goods_search({gid: this.gid})
          .then(({data})=>{
            this.goods  = data
          })
          .catch(e=>{
            this.$warn(e.info)
          })
      },
      buyYz(){
        if(versions.ios){
          bridge.openBrowser(this.youzanUrl)
        }else{

        }

      },
      next(){
        this.popVisible=false
        let {goods, num, total, gid, uid, token, phone, shopToken, area} = this
        let {name} = goods
        this.$router.push({path: 'chooseAddress', query: {
            name,
            num,
            cvnt: total,
            gid,
            uid,
            token,
            phone,
            shopToken,
            area
          }
        });
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    background: #F5F5FB;
    height: 100%;
    overflow: hidden;
    position: relative;
    /*padding-bottom: 88px;*/
  }

  .banner {
    display: block;
    width: 100%;
    height: 572px;
    margin-bottom: 16px;
  }

  .detail {
    height:200px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    padding: 30px;
    margin-bottom: 16px;
    h2 {
      font-size:42px;
      color:rgba(33,33,33,1);
      margin-bottom: 68px;
    }
  }

  .price {
    color: #C22F2F;
    font-size:42px;
    font-weight:600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 22px;
    }
    i {
      font-size:24px;
      text-decoration:line-through;
      color:rgba(102,102,102,1);
      margin-left: 24px;
      font-style: normal;
    }
  }

  .stock {
    font-size: 32px;
    color: #212121;
  }

  .product-info {
    h4 {
      color: #666;
      font-size: 28px;
      height: 76px;
      line-height: 76px;
      padding-left: 30px;
      background: #fff;
      position: sticky;
      top: 0;
    }
  }

  .imgs {
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .pag-ct {
    height: calc(100% - 88px);
    overflow-y: auto;
  }

  /*.bottom-bar {*/
    /*z-index: 1000;*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 88px;*/
    /*display: flex;*/
    /*color: #fff;*/
    /*text-align: center;*/
  /*}*/

  .bottom-bar {
    height: 88px;
    display: flex;
    color: #fff;
    text-align: center;
  }


  .youzhan-buy {
    width:286px;
    height:100%;
    background:linear-gradient(-90deg,rgba(255,173,1,1),rgba(255,190,0,1));
    padding-top: 15px;
    color: inherit;
    div:nth-of-type(1) {
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    div:nth-of-type(2) {
      font-size: 22px;
    }
  }

  .m-buy {
    flex: 1;
    height: 100%;
    background:linear-gradient(-90deg,rgba(247,55,51,1),rgba(255,82,26,1));
    //background: #aaa;
    padding-top: 13px;
    div:nth-of-type(1) {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 13px;
    }
    div:nth-of-type(2) {
      font-size: 22px;
    }
  }

  .choose-product {
    height:900px;
    background:rgba(255,255,255,1);
    font-size: 28px;
    h6 {
      color: #202C5B;
      font-size: 34px;
      text-align: center;
      border-bottom: 1px solid #F7F7F7;
      height: 90px;
      line-height: 89px;
      margin-bottom: 43px;
    }
  }

  .product-type {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 66px;
    label {
      color: #686868;
    }
    .product-type-item {
      min-width:250px;
      padding: 0 24px;
      height:84px;
      border:1px solid rgba(20,59,145,1);
      border-radius:6px;
      color: #143B91;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .product-num {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 66px;
    label {
      color: #686868;
    }
  }

  .num-select {
    display: flex;
    width: 250px;
    height: 84px;
    border:1px solid rgba(229,229,229,1);
    border-radius: 8px;
    span {
      background:rgba(248,248,248,1);
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      flex: 1;
      font-size: 40px;
      &:active {
        background:rgba(238,238,238,1);
        /*color: #e5e5e5;*/
      }
      color: #666;
    }
    input {
      color: #143B91;
      width: 84px ;
      height: 100%;
      outline: none;
      border-top: 0;
      border-bottom: 0;
      border-left: 1px solid rgba(229,229,229,1);
      border-right: 1px solid rgba(229,229,229,1);
      text-align: center;
    }
  }


  .total {
    margin: 0 30px;
    border-top: 1px solid #ECECEC;
    padding-top: 43px;
    text-align: center;
    .lb {
      color: #686868;
      font-size: 28px;
      margin-bottom: 41px;
    }
    .total-price {
      color: #202C5B;
      font-size: 72px;
      span {
        font-size: 30px;
      }
    }
  }

  .next {
    margin: 180px 30px 0 30px;
    line-height: 84px;
    text-align: center;
    height:84px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    color: #fff;
    font-size: 34px;
  }

  .choose-product {
    transform: translateY(100%);
    transition: transform .5s ease;
    &.show{
      transform: translateY(0);
    }
  }



</style>
<style lang="scss">
  .cube-popup {
    position: absolute;
  }
</style>
